<template>
<!-- 提现记录 -->
<div id="moneyRecord">
	<header class="mui-bar mui-bar-nav header">
		<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
		<h1 class="mui-title">{{routerTitle}}</h1>
	</header>
	<div class="mui-content">
		<pullRefresh @refresh="toRefresh">
			<div class="order-list">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<div class="li-date">
							<span>钱包类型</span>
							<span>账变金额</span>
							<span>当前余额</span>
						</div>
					</li>
					<li class="mui-table-view-cell" v-for="(item,index) in records">
						<div class="li-date">
							<span style="width:70px;text-align: left;">{{item.class}}</span>
							<span style="width:70px;text-align: left;">{{item.money}}</span>
							<span style="width:70px;text-align: right;">{{item.afterMoney}}</span>
						</div>
						<p>{{new Date(item.time).toLocaleString('chinese',{hour12:false})}} {{item.info}}</p>
					</li>
				</ul>
			</div>
		</pullRefresh>
		<!-- 分页 -->
		<div v-if="pageNum>1" class="pageNav">
			<button :style="curPage==1?'opacity:.2':''" @tap="changePage(-1)" type="button" class="mui-btn mui-btn-primary">«上一页</button>
			<select v-model="curPage">
				<option v-for="i in pageNum" :value="i">{{i}}/{{pageNum}}</option>
			</select>
			<button :style="curPage==pageNum?'opacity:.2':''" @tap="changePage(1)" type="button" class="mui-btn mui-btn-primary">下一页»</button>
		</div>
	</div>
</div>
</template>

<script>
import pullRefresh from "@/components/pullRefresh"
import {moneyRecord} from "@/api/my"
export default{
	name:"moneyRecord",
	components:{
		  pullRefresh
	},
	data(){
		return{
			curPage:1,
			pageNum:1,
			records:[],
		}
	},
	watch:{
		curPage(val){
			this.getMoneyRecordByPage(val)
		}
	},
	mounted(){
		this.getMoneyRecordByPage(1)
	},
	methods:{
		getMoneyRecordByPage(page,callback){
			mui.showLoading("等待中..", "div");
			moneyRecord({page}).then(res=>{
				res.records.forEach(item=>{
					switch (item.classify){
						case 1:
							item.class="充值钱包"
							break;
						case 2:
							item.class="消费钱包"
							break;
						case 3:
							item.class="盈利钱包"
							break;
						case 4:
							item.class="流水钱包"
							break;
						case 5:
							item.class="流水汇总"
							break;
						default:
							item.class="其　　他"
							break;
					}
				})
				
				this.pageNum = res.pageNum
				this.records = res.records
				mui.hideLoading()
				callback && callback()
			})
		},
		changePage(e){
			if(e==-1){
				if(this.curPage==1){
					return;
				}else{
					this.curPage--
				}
			}else{
				if(this.curPage==this.pageNum){
					return;
				}else{
					this.curPage++
				}
			}
		},
		toRefresh(callback){
			 //这里进行重新加载数据操作
			 this.getMoneyRecordByPage(1,()=>{
				callback()
			 })
		}
	}
}
</script>